<template>
    <div class="content_container">
        <div class="left_container management">
            <div class="title_management">
                <h2>云分析配置</h2>
            </div>
            <div class="content_management">
                <el-button size="mini" type="primary"
                    style="margin: 0 0 20px 20px;width: 110px;height: 40px;font-size: 17px;"
                    v-if="role === '超级管理员' || role === '管理员'" @click="add(null, '产品')">新增产品</el-button>
                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
                    :tree-props="{ children: 'childMenuList', hasChildren: 'hasChildren' }" :header-cell-style="getRowClass"
                    :row-class-name="tableRowClassName">
                    <el-table-column label="分析设置" prop="name" sortable align="left">
                    </el-table-column>
                    <el-table-column label="类型" prop="pageType" sortable align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="200px">
                        <template slot-scope="scope">

                            <!-- 新增 -->
                            <el-tooltip class="item" effect="dark" content="新增" placement="top">
                                <el-button size="mini" type="warning" plain v-if="scope.row.pageType !== '菜单'"
                                    @click="add(scope.row, null)" icon="el-icon-plus"></el-button>
                            </el-tooltip>

                            <!-- 编辑 -->
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <el-button size="mini" @click="edit(scope.row)" icon="el-icon-edit"></el-button>
                            </el-tooltip>

                            <!-- 删除 -->
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <el-button size="mini" type="danger" @click="del(scope.row)"
                                    icon="el-icon-delete"></el-button>
                            </el-tooltip>

                            <!-- 菜单配置 -->
                            <el-tooltip class="item" effect="dark" content="菜单配置" placement="top">
                                <el-button size="mini" type="info" @click="openMenuDrawer(scope.row)"
                                    v-if="scope.row.pageType === '菜单'" icon="el-icon-s-operation"></el-button>
                            </el-tooltip>

                            <!-- 测试 -->
                            <el-tooltip class="item" effect="dark" content="测试" placement="top">
                                <el-button size="mini" icon="el-icon-mouse" v-if="scope.row.pageType === '菜单'"
                                    @click="handleTest(scope.row)"></el-button>
                            </el-tooltip>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 菜单 -->
        <el-drawer :visible.sync="menuDrawer" :direction="direction1" size="30%">
            <template slot="title">
                <div class="title_drawer">
                    <h4>
                        {{ drawerTitle }}
                    </h4>
                </div>
            </template>
            <el-form ref="menuEditForm" :model="form" :rules="rules" label-width="120px" label-position="left"
                style="padding-left:25px;">
                <el-form-item label="菜单名称" v-if="form.type == '菜单'" prop="name">
                    <el-input v-model.trim="form.name" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="目录名称" v-if="form.type == '目录'" prop="name">
                    <el-input v-model.trim="form.name" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="产品名称" v-if="drawerTitle == '新增产品' || drawerTitle == '编辑产品'" prop="name">
                    <el-input v-model.trim="form.name" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="图标选择" v-if="form.type == '目录'" prop="pageIcon">
                    <div class="icon_Select">
                        <div class="icon_replace" @click="iconSelectClick">
                            <i class="iconfont" :class="form.pageIcon" style="font-size:25px;z-index:110;"></i>
                            <i class="el-icon-arrow-down"></i>
                        </div>
                        <el-select v-model="form.pageIcon" placeholder="请选择图标"
                            style="transform:translateY(-40px);opacity:0;" ref="iconSelect">
                            <el-option v-for="item in iconOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                                <i class="iconfont" :class="item.value" style="font-size:25px;"></i>
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="克隆配置" v-if=" this.drawerTitle == '新增菜单'">
                    <el-select v-model="form.cloneConfig" placeholder="请选择克隆的菜单" clearable>
                        <el-option v-for="item in menuList" :key="item.pageCode" :label="item.name" :value="item.pageCode">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-button type="primary" @click="save">保存</el-button>
            </el-form>
        </el-drawer>

        <!-- 菜单配置 -->
        <el-drawer :visible.sync="drawer" :direction="direction" size="80%" :show-close="false" :before-close="handleClose">
            <template slot="title">
                <div class="title_drawer">
                    <h4>
                        菜单配置
                        <el-tooltip class="item" effect="dark" content="使用说明" placement="top">
                            <span class="breach_div_icon">
                                <i class="el-icon-question"></i>
                            </span>
                        </el-tooltip>
                    </h4>
                </div>
            </template>
            <menuConfig @saveMenu="saveMenu" :editRow="editRow" ref="menuConfig" />
        </el-drawer>
    </div>
</template>

<script>
import {
    getCloudAnalysisListRequest,
    addDirectoryRequest,
    modifyDirectoryRequest,
    deleteDirectoryRequest,
    addMenuRequest,
    modifyMenuRequest,
    deleteMenuRequest,
    addCloudAnalysisProductRequest,
    modifyCloudAnalysisProductRequest,
    deleteCloudAnalysisProductRequest,
    savePageConfigRequest
} from '@/api/cloudAnalysis'
import { deepClone } from '@/utils'

export default {
    // mixins: [mixins],
    data() {
        return {
            role: JSON.parse(localStorage.getItem('userInfo')).role,
            iconOptions: this.$publicData('iconOptions'),
            tableData: [
                // {
                //     pageType:'菜单'
                // }
            ],
            direction: 'ltr',
            drawer: false,
            editRow: null,
            api: null,
            drawerTitle: null,
            menuDrawer: false,
            direction1: 'rtl',
            form: {
                type: null,
                pageIcon: null,
                cloneConfig: null,
                name: null,
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称！', trigger: 'blur' }
                ],
                pageIcon: [
                    { required: true, message: '请选择图标！', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        //table 自定义表头
        getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return "background:#eee;font-weight: 400;color:#666;text-align:center";
            }
        },
        tableRowClassName({ row, rowIndex }) {
            if (row.pageType === '目录') {
                return 'warning-row';
            } else if (row.pageType === '菜单') {
                return ''
            } else {
                return 'catalogue-row'
            }
        },
        async getList() {
            const res = await getCloudAnalysisListRequest()
            if (res.code !== 200) return this.$message.error(res.message)
            this.tableData = res.data
        },
        //保存菜单信息
        save() {
            this.$refs['menuEditForm'].validate(async valid => {
                if (!valid) return
                const res = await this.api(this.form)
                if (res.code !== 200) return this.$message.error(res.message)
                this.$message({
                    type: 'success',
                    message: res.message
                })
                this.menuDrawer = false
                this.getList()
            })
        },
        add(row, type) {
            if (type) {
                this.form = {}
                this.drawerTitle = '新增产品'
                this.api = addCloudAnalysisProductRequest
            } else {
                if (row.pageType == '目录') {
                    this.form = {}
                    this.form.type = '菜单'
                    this.form.directoryId = row.id
                    this.drawerTitle = '新增菜单'
                    this.api = addMenuRequest
                } else {
                    this.form = {}
                    this.form.type = '目录'
                    this.form.productId = row.id
                    this.drawerTitle = '新增目录'
                    this.api = addDirectoryRequest
                }
            }
            this.menuDrawer = true
        },
        edit(row) {
            console.log(row, 'row');
            if (row.pageType == '目录') {
                this.form = deepClone(row)
                this.form.type = '目录'
                this.drawerTitle = '编辑目录'
                this.api = modifyDirectoryRequest
            } else if (row.pageType == '菜单') {
                this.form = deepClone(row)
                this.form.type = '菜单'
                this.drawerTitle = '编辑菜单'
                this.api = modifyMenuRequest
            } else {
                this.form = deepClone(row)
                this.drawerTitle = '编辑产品'
                this.api = modifyCloudAnalysisProductRequest
            }
            this.menuDrawer = true
        },
        del(row) {
            let prompt
            if (row.pageType) {
                prompt = row.pageType == '菜单' ? `此操作将永久删除该菜单, 是否继续?` : `此操作将永久删除该目录（包含所有子菜单）, 是否继续?`
            } else {
                prompt = `此操作将永久删除该产品（包含所有子目录和菜单）, 是否继续?`
            }
            this.$confirm(prompt, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        let id = row.id
                        let res
                        if (row.pageType) {
                            if (row.pageType == '菜单') {
                                res = await deleteMenuRequest({ id })
                            } else {
                                res = await deleteDirectoryRequest({ id })
                            }
                        } else {
                            res = await deleteCloudAnalysisProductRequest(id)
                        }
                        if (res.code !== 200) return this.$message.error(res.message)
                        this.$message({
                            type: 'success',
                            message: res.message
                        })
                        this.getList()
                    } else if (action === 'cancel') {
                        this.$message({
                            message: '取消操作',
                        })
                    }
                    done();
                }
            }).catch(() => { })
        },
        //选择图表
        iconSelectClick() {
            this.$refs.iconSelect.toggleMenu()
        },
        openMenuDrawer(row) {
            this.editRow = deepClone(row)
            this.drawer = true
        },
        async saveMenu(value) {
            let pageConfig = {
                pageCode: this.editRow.pageCode,
                ...value
            }
            const res = await savePageConfigRequest(pageConfig)
            if (res.code !== 200) return this.$message.error(res.message)
            this.$message({ type: 'success', message: res.message })
            localStorage.setItem('valid', JSON.stringify([]))
            this.drawer = false
        },
        handleClose(done) {
            this.$confirm('是否记录页面配置！', '提示')
                .then(_ => {
                    let menuForm = this.$refs.menuConfig.menuForm
                    this.saveMenu(menuForm)
                    done();
                })
                .catch(_ => {
                    done();
                });
        },
        //测试
        handleTest(row) {
            window.open(`${this.$url(window.location.origin)}/testAnaly?pageCode=${row.pageCode}`)
        }
    }
}
</script>

<style lang="scss" scoped>
.title_management {
    margin-left: 30px;
}

.content_management {
    margin: 0 15px;

    ::v-deep .el-table {
        .warning-row {
            background: #f0f0f0;
        }

        .catalogue-row {
            background: #e0e0e0;
        }
    }
}

.title_drawer {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

//修改页面
.script_management,
.tools_config,
.generate_page {
    position: relative;
    padding: 0 50px;
    height: calc(100vh - 170px);

    .fixed_btn {
        position: absolute;
        bottom: 0;
        left: 50%;
    }
}

::v-deep .el-drawer__header {
    padding: 10px;
    margin-bottom: 0;
}


.icon_Select {
    width: 200px;
    height: 40px;

    .icon_replace {
        width: 200px;
        height: 40px;
        float: left;
        border: 1px solid #ccc;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
    }
}
</style>